@import (less) "UICONST.css";

html,
body {
    font-family: PingFangSC-Regular;
    overflow: hidden;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

/* 隐藏滚动条 */

::-webkit-scrollbar {
    width: 0px;
}

::-webkit-scrollbar {
    display: none;
}

input[type=button],
input[type=submit],
input[type=file],
input,
button {
    cursor: pointer;
    -webkit-appearance: none;
}

input::placeholder,
textarea::placeholder {
    color: #999999 !important;
    font-size: px2rem(32px);
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

input[type="number"] {
    -moz-appearance: textfield;
}
input {
    outline: none;

    -webkit-appearance: none;
    /*去除系统默认的样式*/

    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    /* 点击高亮的颜色*/
}

button {
    border: none;
}
.tr {
    text-align: right !important;
}
.tl {
    text-align: left !important;
}
.fr {
    float: right;
}

.fl {
    float: left;
}

.m-r-20 {
    margin-right: px2rem(20px);
}
.m-l-20 {
    margin-left: px2rem(20px);
}

.p-r-20 {
    padding-right: px2rem(20px);
}
.p-l-20 {
    padding-left: px2rem(20px);
}



.warning {
    /* 警示色 */
    color: #d0021b !important;
}
.primary-text {
    color: @primaryColor !important;
}
.success-text {
    color: @successColor !important;
}

.warning-text {
    color: @warningColor !important;
}
.danger-text {
    color: @dangerColor !important;
}
.grey-text {
    color: @greyColor !important;
}
.disabled-text {
    color: @disabledColor;
}
.white-bg {
    background-color: #fff !important;
}
.grey-bg {
    background: #F8F8F8 !important;
}
.blank-grey {
    height: px2rem(20px);
    background: #F8F8F8;
}
.radius-16 {
    border-radius: px2rem(16px);
}
.blank {
    height: px2rem(10px);
}
.blank-2 {
    height: px2rem(20px);
}
.blank-3 {
    height: px2rem(30px);
}
.blank-24 {
    height: px2rem(24px);
}

.link-icon {
    display: inline-block;
    vertical-align: middle;
    height: px2rem(22px);
    width: px2rem(12px);
    background: url('images/base/arrow-r-gray.png') no-repeat no-repeat center center;
    background-size: 100% 100%;
}

.auto-width {
    width: auto !important;
}

.font-size0 {
    font-size: 0 !important;
}

/*标签样式 - begin*/
.ui-tag {
    background-color: #ecf5ff;
    display: inline-block;
    height: px2rem(40px);
    padding: 0 px2rem(10px);
    line-height: px2rem(40px);
    font-size: px2rem(24px);
    color: @primaryColor;
    border: px2rem(2px) solid #d9ecff;
    border-radius: px2rem(4px);
    box-sizing: border-box;
    white-space: nowrap;
}
.ui-tag-mini {
    height: 20px;
    padding: 0 5px;
    line-height: 19px;
}
.ui-tag-small {
    height: 24px;
    padding: 0 8px;
    line-height: 22px;
}
.ui-tag-medium {
    height: 28px;
    line-height: 26px;
}
.ui-tag.ui-tag-danger {
    background-color: #fef0f0;
    border-color: #fde2e2;
    color: @dangerColor;
}
.ui-tag.ui-tag-warning {
    background-color: #fdf6ec;
    border-color: #faecd8;
    color: @warningColor;
}
.ui-tag.ui-tag-info {
    background-color: #f4f4f5;
    border-color: #e9e9eb;
    color: @infoColor;
}
.ui-tag.ui-tag-success {
    background-color: #f0f9eb;
    border-color: #e1f3d8;
    color: @successColor;
}
/*标签样式 - end*/

.auto-width {
    width: auto !important;
}
.auto-height {
    height: auto !important;
}
.height-100 {
    height: 100% !important;
}
.font-size0 {
    font-size: 0 !important;
}

.inline-block {
    display: inline-block;
    vertical-align: middle;
}

.blue-text {
    color: #3B96FF;
}
.flex-between {
    -webkit-display: flex;
    display: flex;
    justify-content: space-between;
    justify-content: -webkit-space-between;
}
.flex {
    display: -webkit-flex;
    display: flex;

    &.column {
        flex-direction: column;
    }
    &.align-center {
        align-items: center;
    }
    .flex-1 {
        flex: 1;
    }
}
.flex-page {
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden !important;

    .edit-container,
    .bottom-box,
    .operate-btn-box {
        position: unset;
        top: unset;
        right: unset;
        bottom: unset;
        left: unset;
    }
    .page-cont,
    .flex-cont,
    .edit-container {
        flex: 1;
    }
}

.shadow {
    box-shadow: 0.5px 0.5px 2px 1px #efefef;
}

.bill-select-items,
.account-select-items {
    padding: px2rem(30px);

    .bill-select-item {
        position: relative;
        display: block;
        width: auto;
        height: auto;
        margin-bottom: px2rem(30px);
        background: #fff;

        input {
            display: none;
        }
        &::after {
            content: ' ';
            position: absolute;
            width: px2rem(40px);
            height: px2rem(40px);
            right: px2rem(30px);
            top: px2rem(30px);
            background: url('images/svg/radio.svg') center no-repeat;
            background-size: 100% auto;
        }
        &.ui-radio-checked::after {
            background: url('images/svg/radio-checked.svg') no-repeat;
            background-size: 100% auto;
        }
    }
    .account-select-item {
        background: #F6F6F6;
    }
    &:after {
        display: none;
    }
}
// 账户项样式
.account-select-page {
    .page-title {
        position: relative;
        padding: px2rem(47px) px2rem(30px);
        padding-left: px2rem(40px);
        font-size: px2rem(36px);
        color: #333333;

        .tip {
            font-size: px2rem(24px);
            color: #999999;
        }
        .add-btn {
            position: absolute;
            top: px2rem(40px);
            right: px2rem(30px);
            padding: 0 px2rem(38px);
            padding-left: px2rem(78px);
            height: px2rem(68px);
            line-height: px2rem(68px);
            font-size: px2rem(28px);
            border-radius: px2rem(34px);
            color: #0F9CFF;
            background: url('images/svg/add.svg') px2rem(38px) center no-repeat;
            background-color: #F0F0F0;
            background-size: px2rem(28px) auto;
        }
    }
}
.account-select-item {
    position: relative;
    border-radius: px2rem(10px);
    height: px2rem(246px) !important;
    box-sizing: border-box;
    padding: px2rem(30px) px2rem(30px) px2rem(30px) px2rem(78px);

    .type {
        position: absolute;
        left: 0;
        top: px2rem(20px);
        width: px2rem(48px);
        padding: px2rem(20px) px2rem(12px) 0;
        box-sizing: border-box;
        height: px2rem(120px);
        line-height: 1;
        background: linear-gradient(0deg, #0F9CFF 0%, #51B7FF 100%);
        font-size: px2rem(24px);
        color: #fff;
        text-align: center;
        white-space: normal;
        border-radius: 0 px2rem(16px) px2rem(16px) 0;
        z-index: 1;
    }
    &.account-1 .type {
        height: px2rem(142px);
    }
    .account-info {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: px2rem(24px);
        line-height: px2rem(36px);
        overflow: hidden;

        .label {
            // width: px2rem(160px);
            white-space: nowrap;
            color: #999999;
        }
        .text {
            flex: 1;
            color: #999;
            white-space: normal;
        }
        &.title {
            margin-bottom: px2rem(18px);
            padding-right: px2rem(100px);
            .text {
                font-size: px2rem(32px);
                display: block;
                color: #333;
                width: 100%;
            }
        }
    }
    .type-icon {
        position: absolute;
        right: px2rem(20px);
        bottom: px2rem(20px);
        width: px2rem(98px) !important;
        height: px2rem(98px);
        z-index: 1;
    }


    .loop-account-type(@n, @i) when (@i =< @n) {
        .type-icon.type-@{i} {
            background: url('images/account/type-@{i}.png') no-repeat center;
            background-size: 100% auto;
        }
        
        .loop-account-type(@n, (@i+1));
    }
    .loop-account-type(6, 1);

    &.selected {
        .account-info.title {
            padding-right: 0;
        } 
    }
    .cost-cont {
        font-size: px2rem(24px);
        color: #999999;
        margin-top: px2rem(10px);

        span {
            margin-right: px2rem(20px);
        }
    }
    &.detail-item {
        background: #0F9CFF;
    }
}
// 申请单项样式
.apply-item {
    border-radius: px2rem(16px);
    padding: px2rem(30px);
    background: #fff;

    .apply-title {
        font-size: px2rem(32px);
        line-height: px2rem(32px);
        font-weight: 500;
        color: #333333;
        margin-bottom: px2rem(18px);
    }
    .apply-info {
        font-size: px2rem(24px);
        line-height: px2rem(36px);
        color: #999999;
    }
    .apply-tip {
        font-size: px2rem(24px);
        color: #333333;
        line-height: px2rem(32px);
        margin-top: px2rem(14px);
    }
}
// 申请单选中项样式
.apply-info-item {
    border-radius: px2rem(16px);
    padding: px2rem(30px) px2rem(30px) px2rem(30px) px2rem(67px);
    background: url('images/svg/link.svg') px2rem(24px) px2rem(36px) no-repeat;
    background-color: #F6F6F6;
    background-size: auto px2rem(32px);

    .apply-info-title {
        font-size: px2rem(30px);
        font-weight: 500;
        color: #333333;
        margin-bottom: px2rem(20px);
    }
    .apply-info-text {
        font-size: px2rem(24px);
        line-height: px2rem(34px);
        color: #999999;
    }
}
// 借款单选中项样式
.borrow-info-item {
    border-radius: px2rem(16px);
    padding: px2rem(24px) px2rem(30px);
    background: #F6F6F6;

    .name {
        font-size: px2rem(32px);
        font-weight: 500;
        color: #333333;
    }
    .item-cont {
        font-size: px2rem(24px);
        line-height: px2rem(34px);
        color: #999999;
        margin-top: px2rem(30px);

        .special-text {
            font-size: px2rem(30px);
            font-weight: 500;
            color: #333333;
        }
    }
}
.borrow-button-select {
    .ext-clear-button {
        width: auto;
        background: none;
        top: px2rem(20px);
        right: px2rem(20px);

        &:after {
            content: '删除';
            position: relative;
            color: #0F9CFF;
            font-size: px2rem(24px);
        }
    }
}
// 消费明细项 - 普通报销、对公支付、借款单
.cost-items {
    .cost-item {
        position: relative;
        display: block;
        padding: px2rem(31px);
        border: px2rem(2px) solid #eee;
        border-radius: px2rem(16px);
        margin: 0 px2rem(24px) px2rem(24px);
        background: 0;
        width: auto;
        height: auto;

        .cost-info {
            position: relative;
            font-size: px2rem(32px);
            line-height: px2rem(40px);
            padding-left: px2rem(118px);
            color: #333333;


            .icon {
                position: absolute;
                left: 0;
                top: 0;
                width: px2rem(88px);
                height: px2rem(88px);
                // border: px2rem(2px) solid #eee;
                background: url('images/svg/cost-type.svg') center no-repeat;
                background-size: 100% auto;
            }

            .time {
                font-size: px2rem(24px);
                color: #999999;
                line-height: px2rem(40px);
                margin-top: px2rem(20px);
            }
        }
        .cost-cont {
            font-size: px2rem(24px);
            color: #999999;
            margin-top: px2rem(10px);
            line-height: px2rem(40px);
            padding-top: px2rem(10px);
            padding-left: px2rem(118px);

            .cost-city {
                position: relative;

                &::after {
                    content: ' ';
                    position: absolute;
                    left: -px2rem(18px);
                    top: px2rem(16px);
                    width: px2rem(10px);
                    height: px2rem(10px);
                    border-radius: px2rem(10px);
                    background: #FEAD14;
                }
            }

            span {
                margin-right: px2rem(20px);
            }
            .operate-btns {
                margin-top: px2rem(10px);
                font-size: px2rem(32px) !important;
                color: @primaryColor;

                .ui-button {
                    font-size: px2rem(32px) !important;
                }
                .ui-common-select {
                    .select-text {
                        color: @primaryColor;
                    }
                }
            }
        }

        &.ui-checkbox::after {
            content: ' ';
            position: absolute;
            width: px2rem(40px);
            height: px2rem(40px);
            right: px2rem(30px);
            bottom: px2rem(30px);
            background: url('images/svg/radio.svg') center no-repeat;
            background-size: 100% auto;
        }
        &.ui-checkbox-checked::after {
            background: url('images/svg/radio-checked.svg') no-repeat;
            background-size: 100% auto;
        }
    }

    .loop-cost-type(@n, @i) when (@i =< @n) {
        .cost-@{i} .cost-info .icon {
            background: url('images/svg/cost/cost-@{i}.svg') no-repeat center;
            background-size: 100% auto;
        }
        
        .loop-cost-type(@n, (@i+1));
    }
    .loop-cost-type(111, 101);
    .loop-cost-type(202, 201);
    .loop-cost-type(305, 301);
    .loop-cost-type(405, 401);
    .loop-cost-type(514, 501);
    .loop-cost-type(9903, 9901);

}
.ui-item:first-child {

    .cost-item {
        margin-top: px2rem(24px);
    }
}
// 费用明细 - 采购申请单
.info-list.plan-style,
.cost-items.cost-plan {
    padding: 0;
    .cost-item,
    .info-list-item {
        border: 0;
        padding: 0;
        margin: 0 0 px2rem(24px) 0;

        .info-title {
            color: #999;
            background: #F6F6F6;
            font-size: px2rem(24px);
            padding-left: px2rem(24px);
            height: px2rem(40px);
            line-height: px2rem(40px);
            margin-bottom: px2rem(20px);

            a {
                height: px2rem(40px);
                line-height: px2rem(40px);
                padding: 0 px2rem(24px);

                .select-text {
                    font-size: px2rem(24px);
                    color: #0f9cff;
                }
            }
        }
        .info-item {
            padding-left: px2rem(24px);
        }
    }
}
// 待办列表项
.to-do-item {
    position: relative;
    margin: px2rem(24px) px2rem(24px) !important;
    padding: px2rem(30px);
    background: #fff;
    line-height: normal;
    border-radius: px2rem(12px);
    cursor: pointer;

    .to-do-icon {
        position: absolute;
        top: px2rem(20px);
        left: px2rem(20px);
        width: px2rem(56px);
        height: px2rem(56px);
        background: none;

        img {
            display: block;
            width: 100%;
            height: 100%;
            border-radius: px2rem(12px);
            overflow: hidden;
        }
    }
    .to-do-info {

        .to-do-info-title {
            font-size: px2rem(32px);
            line-height: px2rem(32px);
            margin-bottom: px2rem(18px);
            color: #333333;

        }
        .to-do-info-text {
            color: #999999;
            font-size: px2rem(26px);
            height: px2rem(36px);
            line-height: px2rem(36px);
        }
        .to-do-info-status {
            position: relative;
            margin-top: px2rem(18px);
            height: px2rem(24px);
            line-height: px2rem(24px);

            .info-text {
                color: #333333;
                font-size: px2rem(24px);
                height: px2rem(24px);
                line-height: px2rem(24px);
            }
            .info-status {
                position: absolute;
                bottom: 0;
                right: 0;
                font-size: px2rem(24px);
                line-height: px2rem(24px);
                color: #333333;
                // border: px2rem(2px) solid #ccc;
                padding: 0 px2rem(6px);
                border-radius: px2rem(20px);
            }
            .info-status.approvaling {
                color: #FEAD14;
                // border: px2rem(1px) solid #FEAD14;
            }
            .info-status.approval-reject {
                color: #E84F4B;
                // border: px2rem(1px) solid #E84F4B;
            }
            .info-status.approval-pass {
                color: #28B778;
                // border: px2rem(1px) solid #28B778;
            }
            .info-status.approval-revoke {
                color: #ccc;
                // border: px2rem(1px) solid #ccc;
            }
        }
    }
    .quick-actions {
        position: relative;
        display: flex;
        margin-top: px2rem(24px);
        padding-top: px2rem(15px);
        border-top: px2rem(2px) solid #EBEBEB;

        .ui-button {
            flex: 1;
            margin-right: px2rem(40px);
            border: 0;
            background: none;
            font-size: px2rem(30px);
        }
        .ui-button:last-child {
            margin-right: 0;
        }
        &:after {
            content: ' ';
            position: absolute;
            left: 50%;
            bottom: px2rem(20px);
            width: px2rem(2px);
            height: px2rem(30px);
            background: #EBEBEB;
        }
    }
    &.quick-item {
        padding-bottom: px2rem(15px);

        .to-do-info {

            .to-do-info-title {
                font-size: px2rem(32px);
                line-height: px2rem(32px);
                margin-bottom: px2rem(18px);

            }
            .to-do-info-text {
                font-size: px2rem(24px);
                height: px2rem(36px);
                line-height: px2rem(36px);
            }
            .to-do-info-status {
                margin-top: px2rem(18px);

                .info-text {
                    font-size: px2rem(24px);
                    height: px2rem(24px);
                    line-height: px2rem(24px);
                }
                .info-status {
                    position: absolute;
                    bottom: 0;
                    right: 0;
                    font-size: px2rem(24px);
                    line-height: px2rem(24px);
                    padding: 0 px2rem(6px);
                    border-radius: px2rem(20px);
                }
            }
        }
    }
}
.to-do-item.not-read {
    background: #FCF6D6;
}
